<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
         margin:0;
         padding:0;
      }
      ul,li{
         list-style: none;
      }
      #container{
         width:1380px;
         height:350px;
         border:2px solid #ccc;
         margin:50px auto;
         position: relative;
         overflow: hidden;
      }
      #pre_btn{
         width:60px;
         height:60px;
         border-radius: 100%;
         background:rgba(0, 0, 0, 0.5);
         position: absolute;
         left:0;
         top:175px;
         transform: translateY(-50%);
         z-index: 1;
      }
      #pre_btn img{
         width:45px;
         height:45px;
         margin:7px;
      }
      #next_btn{
         width:60px;
         height:60px;
         border-radius: 100%;
         background:rgba(0, 0, 0, 0.5);
         position: absolute;
         right:0;
         top:175px;
         transform: translateY(-50%);
         z-index: 1;
      }
      #next_btn img{
         width:45px;
         height:45px;
         margin:7px;
      }
      #banner_container{
         width:8280px;
         height:350px;
         position: absolute;
         left:0;
      }
      #banner_container li{
         float:left;
      }
      
   </style>
</head>
<body>
   <div id="container">
      <div id="pre_btn"><img src="./img/zuo-copy.png" alt=""></div>
      <div id="next_btn"><img src="./img/you-copy.png" alt=""></div>
      <ul id='banner_container'>
         <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
         <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
         <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
         <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
         <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
         <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
      </ul>
   </div>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
      // 创建构造函数
      function Banner(){
         // 获取已有元素节点
         // banner显示框
         this.container = document.querySelector('#container');
         // 左按钮
         this.pre_btn = document.querySelector('#pre_btn');
         // 右按钮
         this.next_btn = document.querySelector('#next_btn');
         // banner长图
         this.banner_container = document.querySelector('#banner_container');
         // bannner个图
         this.selids = document.querySelectorAll('#banner_container li');
         // 设置初始下标为0
         this.index = 0;
         // 调用左按钮绑定函数
         this.bindEvent();
         // 调用自动循环函数
         this.autoPlay();
      }
      // 创建左按钮点击按钮绑定函数
      Banner.prototype.bindEvent = function(){
         var self = this;
         var max_index = self.selids.length - 1;
         // 给左按钮绑定点击事件
         self.pre_btn.onclick = function(){
            if(self.index === 0){
               // 当点击左按钮时，索引值也为0时，可以往右瞬移一个banner长度
               self.banner_container.style.left = -max_index* 1380 + 'px';
               self.index = max_index - 1;
            }else{
               self.index--;
            }
            self.changeBanner();
         }
           // 给右按钮绑定点击事件 
           self.next_btn.onclick = function(){
              // 当点击右按钮时，索引值为最后一位时，可以将ul盒子左边的长度瞬间为0
              if(self.index === self.selids.length - 1){
                 self.banner_container.style.left = 0 + 'px';
               //   索引值改为1
                 self.index = 1;
              }else{
                 self.index++
              }
            //   调用切换函数
              self.changeBanner();
           }
      }
      // 创建点击按钮切换函数
      Banner.prototype.changeBanner = function(){
         // this.banner_container.style.left = -this.index*1380 +'px';
         $(this.banner_container)
           // 为了防止动画的队列过多,每次开启动画之前都先清空上一次的动画
         .stop()
         .animate({
            left:-this.index*1380 +'px'
         },1000)
      }
      // 自动循环
      Banner.prototype.autoPlay = function(){
         var self = this;
         var lunbo = setInterval(function(){
            self.next_btn.onclick();
         },2000)
      // 用户体验优化
         this.container.onmouseover = function(){
            clearInterval(lunbo);
         }
         this.container.onmouseout = function(){
            clearInterval(lunbo);
            lunbo = setInterval(function(){
            self.next_btn.onclick();
         },2000)
         }
      }
      new Banner();
   </script>
</body>
</html>